<template>
  <div id="app">
    <!-- <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view/> -->
    <!-- <parent></parent> -->
    
    <!-- <router-link to="/">首页</router-link>&nbsp;&nbsp;&nbsp;&nbsp;
    <router-link to="/news">新闻页面</router-link>&nbsp;&nbsp;&nbsp;
    <router-link to="/hot">热门页面</router-link> -->

    <!-- <button @click="goHome">首页</button>&nbsp;&nbsp;&nbsp;&nbsp;
    <button @click="goNews">新闻页面</button>&nbsp;&nbsp;&nbsp;
    <button @click="goHot">热门页面</button>

    <button @click="goBefore">前进</button>
    <button @click="goAfter">后退</button> -->

    <!-- <router-link to="/index">首页</router-link>&nbsp;&nbsp;&nbsp;&nbsp;
    <router-link to="/list">列表</router-link>

    <router-view></router-view> -->
    <!-- <child></child> -->
    <!-- <parent></parent> -->

    <!-- <element-view></element-view> -->
    <!-- <user-view></user-view> -->
    <router-view></router-view>
  </div>
</template>
<script>
import Child from './components/ch08/home/Child.vue'
import Parent from './components/ch08/home/Parent.vue'
import router from './router';
import ElementView from './views/Element/ElementView.vue';
import UserView from './views/UserView.vue';
export default {
  components: {  Child, Parent, ElementView, UserView },
  methods:{
    goHome:function(){
      this.$router.push({path:"/"});
    },
    goNews:function(){
      this.$router.push({path:"/news",query:{abc:1}});
    },
    goHot:function(){
      // this.$router.push({name:"hot",params:{abc:1}});
      // this.$router.replace({name:"hot",params:{abc:1}});
    },
    goBefore:function(){
      this.$router.go(1)
    },
    goAfter:function(){
      this.$router.go(-1)
    }
    
  }
  
}
</script>
<style>
</style>
